*{
    margin: 0;
    padding: 0;
}
/*最外边*/
.wrapper{
    width: 500px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
/*最外边 布局中间层*/
.wrapper .wrapper-middle{
    display: flex;
    justify-content: space-around;
}
/*骰子*/
.craps{
    display: flex;
    width: 100px;
    height: 100px;
    background: #000;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
}
/*骰子上的点*/
.point{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
}
/*骰子1*/
.craps1{
    justify-content: center;
    align-items: center;
}
/*骰子2*/
.craps2{
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
/*骰子3*/
.craps3{
    justify-content: space-around;
}
.craps3 .point:nth-child(2){
    align-self: center;
}
.craps3 .point:nth-child(3){
    align-self: flex-end;
}
/*骰子4-9 原理相同，共用一个即可*/
.craps4-9{
    justify-content: space-around;
    flex-direction: column;
}
.craps4-9 .middle{
    display: flex;
    justify-content: space-around;
}